import React, { FC, useEffect, useRef, useState, MouseEvent } from "react"
import { getSelectFrame, drawTimeLine2 } from "./utils/canvasUtil"

interface focusPositionTpe {
    start: number,
    end: number
}

interface Props {
    start?: number,
    step?: number,
    scale?: number,
    focusPosition?: focusPositionTpe
}

const Timeline2: FC<Props> = ({  start = 0, step = 5, scale = 0, focusPosition = { start: 0, end: 0 }} ) => {
    const canvasData = {
        textAlign: 'center' as 'center',
        textSize: 10, // 字号
        textBaseline: 'middle' as 'middle', // 文字对齐基线 (ts 中定义的textBaseLine是一个联合类型)
        textScale: 0.85, // 支持更小号字： 10 / 12
        textColor: '#fff', // 文字颜色
        fontWeight: 100, // 文字粗细
        focusColor: '#6D28D9',
        bgColor: '#000',
        radius: 1.5 // 半径
    }
    const [canvasSize, setCanvasSize] = useState({ width: 0, height: 30 })
    let canvasContext = {} as CanvasRenderingContext2D;
    const timeLine = useRef<HTMLCanvasElement>(null)
    
    const handleClick = (event: MouseEvent<HTMLCanvasElement>) => {
        const offset = event.nativeEvent.offsetX;
        const frameIndex = getSelectFrame(start + offset, scale, step);
        console.log(frameIndex)
    }


    // const drawLine = () => {
    //     const { width, height } = canvasSize
    //     const { bgColor, textColor, radius, textSize, textAlign, textBaseline, fontWeight } = canvasData
    //     // 1. 初始化画布
    //     const context = canvasContext
    //     context.textAlign = canvasData.textAlign
    //     context.clearRect(0, 0, width, height);
    //     context.fillStyle = bgColor;
    //     context.fillRect(0, 0, width, height);
    //     // 2. 计算网格
    //     const gridSizeS = getGridSize(scale); // 匹配当前缩放下每小格的宽度
    //     const gridSizeB = gridSizeS * step; // 根据步进计算每大格的宽度
    //     const circleY = height / 2
        

    //     // 3. 圆点
    //     context.fillStyle = textColor
    //     const list = new Array(initTimeLin2).fill('')
    //     list.forEach((_, index) => {
    //         if (index !== list.length - 1) {
    //             const circleX = (index + 1) * gridSizeB
    //             context.beginPath()
    //             context.fillStyle = textColor
    //             context.arc(circleX, circleY, radius, 0, Math.PI * 2);
    //             context.fill()
    //             context.closePath()
    //         }
    //     })

    //     // 4.时间
    //     context.font = `${fontWeight} ${textSize}px 楷体`
    //     context.textAlign = textAlign
    //     context.textBaseline = textBaseline
    //     list.forEach((_, index) => {
    //         context.beginPath()
    //         const circleX = index * gridSizeB + gridSizeB / 2
    //         const time = index + 1
    //         const text = time >= 10 ? time : `0${time}`
    //         context.fillText(`00:${text}`, circleX, circleY)
    //         context.closePath()
    //     })
    // }

    const initCanvas = () => {
        const timeLineRef = timeLine.current;
        if (timeLineRef) {
            const { clientWidth } = timeLineRef.parentElement!;
            // 像素比问题
            const pix = window.devicePixelRatio || 1
            timeLineRef.width = clientWidth * pix
            timeLineRef.height = canvasSize.height * pix
            timeLineRef.style.width = `${clientWidth}px`; // 控制显示大小
            timeLineRef.style.height = `${canvasSize.height}px`; // 控制显示大小
            setCanvasSize({ width: clientWidth, height: canvasSize.height })
    
            canvasContext = timeLineRef.getContext('2d') ?? {} as CanvasRenderingContext2D
            canvasContext.scale(pix, pix)
            canvasContext.imageSmoothingEnabled = false; // 关闭抗锯齿
            drawTimeLine2(canvasContext, { start, step, scale }  as any, canvasSize, canvasData as any);
        }
    };
    
    useEffect(() => {
        initCanvas()
    }, [])

    return (
        <div  style={{ position: 'relative', overflow: 'hidden' }}>
            <canvas
                ref={timeLine}
                onClick={handleClick}
            />
        </div>
    )
}

export default Timeline2